import React , {useEffect,useRef}from 'react';
import './home.scss';
import headerBg from '../images/header2.png'
import { Chart1 } from '../component/chart-1';
import { Chart2 } from '../component/chart-2';
import { Chart3 } from '../component/chart-3';
import { Chart4 } from '../component/chart-4';
import { Chart5 } from '../component/chart-5';
import { Chart6 } from '../component/chart-6';
import { Chart7 } from '../component/chart-7';
import { Chart8 } from '../component/chart-8';
import { Chart9 } from '../component/chart-9';
import { Chart10 } from '../component/chart-10';
import { Chart11 } from '../component/chart-11';
import { Chart12 } from '../component/chart-12';
import { Chart13 } from '../component/chart-13';
import { Chart14 } from '../component/chart-14';

export const Home = () => {
  
  
  return (
    <div className='home'>
      <header style={{backgroundImage: `url(${headerBg})`}}></header>
      <main>
        <section className='section1'>
          <Chart1></Chart1>
          <Chart2 />
        </section>
        <section className=' section2'>
          <Chart3 />
          <Chart4 />
        </section>
        <section className='bordered section3'>
          <Chart5 />
        </section>
        <section className='section4'>
          <Chart6 />
          <div className="bordered 年龄段">
            <h2>犯罪人员年龄段分布</h2>
            <div className="charts">
              <Chart7/>
              <Chart8/>
              <Chart9/>
            </div>
          </div>
        </section>
        <section className='section5'>
          <div className='bordered row1 案发类型' >
            <h2>案发类型统计</h2>
            <div className='charts'>
              <Chart10 />
              <Chart11 />
            </div>
          </div>
          <div className='bordered row2 案发街道'>
            <h2>案发街道统计</h2>
            <div className='charts'>
              <Chart12 />
              <Chart13 />
            </div>
          </div>
          <div className='bordered row3 作案手段'>
            <h2>作案手段分析</h2>
            <Chart14 />
          </div>
        </section>
      </main>
      <footer className='footer'>
        大屏数据平台利用大数据技术采集犯罪作案信息是一套实时监控的数据系统Copyright@2017兰州市公安局
      </footer>
    </div>
  );
};
